<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="http://api.map.baidu.com/api?v=2.0&ak=5zQ9nwYR2PShtg3XHWEFDp9yGAy1E6vb"></script>
    <!-- 引入 ECharts -->
    <script src="./dist/echarts.min.js"></script>
    <!-- 引入百度地图扩展 -->
    <script src="./dist/extension/bmap.min.js"></script>
    <script src="js/jquery.js" type="text/javascript"></script>
</head>
<body>
<div id="echart" style="width:1400px;height:800px"></div>
</body>
<script>
    // var myChart = echarts.init(document.getElementById('echart'))
    // option = {
    //     // 加载 bmap 组件
    //     bmap: {
    //         // 百度地图中心经纬度
    //         center: [120.13066322374, 30.240018034923],
    //         // 百度地图缩放
    //         zoom: 14,
    //         // 是否开启拖拽缩放，可以只设置 'scale' 或者 'move'
    //         roam: true,
    //         // 百度地图的自定义样式，见 http://developer.baidu.com/map/jsdevelop-11.htm
    //         mapStyle: {}
    //     },
    //     series: [{
    //         type: 'scatter',
    //         // 使用百度地图坐标系
    //         coordinateSystem: 'bmap',
    //         // 数据格式跟在 geo 坐标系上一样，每一项都是 [经度，纬度，数值大小，其它维度...]
    //         data: [ [120, 30, 100] ]
    //     }]
    // }
    //
    // // 获取百度地图实例，使用百度地图自带的控件
    // // var bmap = myChart.getModel().getComponent('bmap').getBMap();
    // // bmap.addControl(new BMap.MapTypeControl());
    // myChart.setOption(option)

    var uploadedDataURL = "static/data/busline_map_temp.json";
    var testUrl = 'static/data/145.json'
    var myChart = echarts.init(document.getElementById('echart'))


    var t_pos = {
        left: 0,
        top: 0
    }

    var last_point = [0, 0];
    var counter = 0;
    myChart.showLoading();
    var planePath = 'path://M268.601,18.375c0,0,14.496,0,18.005,0 		\
c31.325,0,59.155,0,59.155,0c6.701,0,12.14,5.238,12.14,11.695v17.872c-24.507,0-44.374,19.859-44.374,44.351 		\
c0,24.492,19.86,44.351,44.374,44.351V335.99c-24.507,0.006-44.374,19.857-44.374,44.357c0,24.484,19.86,44.344,44.374,44.352 		\
v25.26c0,6.457-5.431,11.695-12.14,11.695H200.158c-12.013,0-19.527-7.781-19.527-19.084c0,0,0-351.215,0-365.378 		\
s18.736-42.622,44.1-53.734C238.303,17.658,268.601,18.375,268.601,18.375z M202.818,387.729v39.918 		\
c0,6.531,5.29,11.828,11.821,11.828h35.426c6.531,0,11.814-5.297,11.814-11.828v-39.918H202.818z M202.818,321.199v51.746h59.053 		\
v-51.746H202.818z M202.818,254.904v51.518h59.053v-51.518H202.818z M202.818,188.413v51.517h59.053v-51.517H202.818z 		 \
M202.818,121.882v51.746h59.053v-51.746H202.818z M289.658,121.904c-3.037,0-5.497,3.311-5.497,7.396 		\
c0,4.086,2.46,7.389,5.497,7.389h10.978c3.037,0,5.497-3.303,5.497-7.389c0-4.085-2.46-7.396-5.497-7.396H289.658z M237.38,43.472 		c-20.229,4.766-34.562,30.897-34.562,38.145c0,17.754,0,25.475,0,25.475h59.053l0.03-66.094 		C261.901,40.998,253.641,39.653,237.38,43.472z M328.326,380.348c0-16.328,13.247-29.568,29.59-29.568 		\
c16.335,0,29.582,13.24,29.582,29.568c0,16.334-13.247,29.566-29.582,29.566C341.573,409.914,328.326,396.682,328.326,380.348z 		 M328.326,92.286c0-16.328,13.247-29.567,29.59-29.567c16.335,0,29.582,13.239,29.582,29.567c0,16.335-13.247,29.574-29.582,29.574 		C341.573,121.86,328.326,108.621,328.326,92.286z  '
    myChart.setOption(option = {
        title: [{
            text: "145路公交线路可视化",
            // subtext: '点击右侧柱状图可对应到站点',
            left: 10,
            top: 10,
            textStyle: {
                color: 'rgba(18,89,147,1)',
                fontSize: 40
            }
        }, {
            right: 170,
            text: "公交站点上车人数",
            subtext: '',
            textStyle: {
                color: '#fff',
                fontSize: 15
            }
        }, {
            right: 170,
            top: '53%',
            text: "公交上车客流时变",
            subtext: '',
            textStyle: {
                color: '#fff',
                fontSize: 15
            }
        }],

        grid: [{
            right: 150,

            height: '44%',
            width: '300px',

        }, {
            right: 50,
            width: '380px',
            bottom: '3%',
            top: '58%',

            //height: '40%',

        }, {
            show: true,
            left: null,
            right: 0,
            height: '100%',
            width: '480px',
            bottom: '0%',
            backgroundColor: 'rgba(18,89,147,0.8)'
        }, {
            show: true,
            left: 0,
            top: 0,
            height: '80px',
            width: '320px',
            bottom: '0%',
            backgroundColor: 'rgba(255,255,255,0.8)',
            zlevel: -1
        }

        ],
        tooltip: {
            trigger: 'item',
            transitionDuration: 0,
            position: function(point, params, dom, rect, size) {
                var least_area = 20;
                var offset_x = 30; /* 相对于point的偏移 */
                var offset_y = 30;

                /* last_point的least_area范围内不会产生新的t_pos */
                if (Math.abs(point[0] - last_point[0]) < least_area &&
                    Math.abs(point[1] - last_point[1]) < least_area &&
                    counter >= 2) {
                    return t_pos;
                }
                if (Math.abs(point[0] - last_point[0]) >= least_area ||
                    Math.abs(point[1] - last_point[1]) >= least_area) {
                    counter = 0;
                }
                counter += 1;
                /* 使real_x,real_y有数值 */
                if (counter == 1) {
                    t_pos.left = point[0] + offset_x;
                    t_pos.top = point[1] + offset_y;
                    last_point = [point[0], point[1]];
                }
                /* 此处进行修正tooltip的位置 */
                if (counter == 2) {
                    var real_x = $(dom).position().left;
                    var real_y = $(dom).position().top;
                    t_pos.left += point[0] - real_x + offset_x;
                    t_pos.top += point[1] - real_y + offset_y;
                }
                return t_pos;
            }
        },
        animation: false,
        bmap: {
            center: [106.570453,29.558396],
            zoom: 13,
            roam: true,
            mapStyle: {
                // 'styleJson': [{
                //     "featureType": "all",
                //     "elementType": "all",
                //     "stylers": {
                //         "lightness": 10,
                //         "saturation": -100
                //     }
                // }, {
                //     "featureType": "subway",
                //     "elementType": "labels.icon",
                //     "stylers": {
                //         "color": "#022338",
                //         "visibility": "off"
                //     }
                // }, {
                //     "featureType": "poi",
                //     "elementType": "labels",
                //     "stylers": {
                //         "color": "#022338",
                //         "visibility": "off"
                //     }
                // }, {
                //     "featureType": "highway",
                //     "elementType": "labels.icon",
                //     "stylers": {
                //         "color": "#022338",
                //         "visibility": "off"
                //     }
                // }]
                'style': 'grayscale'
            }

        },
        dataZoom: [{
            type: 'slider',
            yAxisIndex: 0,
            start: 0,
            end: 100,
            filterMode: 'empty',
            textStyle: {
                color: '#fff'
            },
            borderColor: '#fff',
            handleIcon: 'M10.7,11.9v-1.3H9.3v1.3c-4.9,0.3-8.8,4.4-8.8,9.4c0,5,3.9,9.1,8.8,9.4v1.3h1.3v-1.3c4.9-0.3,8.8-4.4,8.8-9.4C19.5,16.3,15.6,12.2,10.7,11.9z M13.3,24.4H6.7V23h6.6V24.4z M13.3,19.6H6.7v-1.4h6.6V19.6z',
            handleSize: '80%',
            handleStyle: {
                color: '#fff',
                shadowBlur: 3,
                shadowColor: 'rgba(0, 0, 0, 0.6)',
                shadowOffsetX: 2,
                shadowOffsetY: 2
            }
        }, {
            type: 'inside',
            yAxisIndex: 0,
            start: 0,
            end: 30,
            filterMode: 'empty'
        }, ],
        visualMap: {
            type: 'continuous',
            top: '65%',
            text: ['High', 'Low'],
            min: 0,

            //seriesIndex: [0,2],
            calculable: false,
            inRange: {
                color: ['#749f6d', '#eac736','#d94e5d']//['lightblue', 'yellow', '#FF8000']
            },
            textStyle: {
                color: '#000',
                formatter: 'aaaa{value}bbbb{value2}' // 范围标签显示内容。
            }

        },
        xAxis: [{
            type: 'value',
            scale: true,
            position: 'top',
            boundaryGap: false,
            splitLine: {
                show: false
            },
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            axisTick: {
                show: false
            },
            axisLabel: {
                margin: 2,
                textStyle: {
                    color: '#fff'
                }
            }
        }, {
            gridIndex: 1,
            min: 0,
            max: 24,
            name: '时间',
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            axisLabel: {
                margin: 2,
                textStyle: {
                    color: '#fff'
                }
            }
        }],
        yAxis: [{
            type: 'category',
            //  name: 'TOP 20',
            nameGap: 16,
            axisLine: {
                show: true,
                lineStyle: {
                    color: '#fff'
                }
            },
            axisTick: {
                show: false,
                lineStyle: {
                    color: '#fff'
                }
            },
            axisLabel: {
                show: false,
                interval: 0,
                textStyle: {
                    color: '#fff'
                }
            },
            data: []
        }, {
            gridIndex: 1,
            min: 0,
            name: '客流',
            axisLine: {
                lineStyle: {
                    color: '#fff'
                }
            },
            axisLabel: {

                margin: 2,
                textStyle: {

                    color: '#fff'
                }
            }
        }],
        series: [{
            id: 'scatter',
            zlevel: -2,
            type: 'scatter',
            coordinateSystem: 'bmap',
            symbolSize: 8,
            // tooltip: {
            //     trigger: 'item',
            //     formatter: function(params) {
            //         return params.name + ' : ' + params.value;
            //     },
            //     position: 'left'
            // },
            tooltip: {
                trigger: 'item',
                formatter: function(params) {
                    return params.name + '上车人数:' + params.value[2] + '人次';
                }
            },
            label: {
                normal: {
                    show: false
                },
                emphasis: {
                    show: false
                }
            },
        }, {
            type: 'lines',

            effect: {
                show: true,
                period: 20,
                trailLength: 0,
                symbol: planePath,
                symbolSize: 15

            },
            coordinateSystem: 'bmap',
            polyline: true,
            zlevel: -2,
            lineStyle: {
                normal: {
                    color: 'rgba(18,89,147, 1)',

                    opacity: 0.8,
                    width: 5,
                    shadowColor: 'rgba(0, 0, 0, 0.9)',
                    shadowBlur: 10
                }
            },

            progressiveThreshold: 500,
            progressive: 200
        }, {
            id: 'bar',
            zlevel: 2,
            type: 'bar',
            symbol: 'none',
            itemStyle: {
                normal: {
                    color: '#ddb926'
                }
            },
            label: {
                normal: {
                    show: true,
                    position: 'right',
                    formatter: function(params) {
                        return params.data[0] + ':' + params.data[1] + '人次';
                    }
                }
            },
            xAxisIndex: 0,
            yAxisIndex: 0,
            data: [],
            encode: {
                x: [1]
            },
            tooltip: {
                trigger: 'item',
                formatter: function(params) {
                    return params.name + '上车人数:' + params.data + '人次';
                }
            }
        }, {
            id: 'line2',
            zlevel: 2,
            type: 'line',

            itemStyle: {
                normal: {
                    color: '#ddb926'
                }
            },
            xAxisIndex: 1,
            yAxisIndex: 1,
            data: [],
            tooltip: {
                trigger: 'item',
                formatter: function(params) {
                    return params.data[0] + '时客流量' + params.data[1] + '人次';
                }
            }
        }]
    });
    // if (!app.inNode) {
    //     // 添加百度地图插件
    //     var bmap = myChart.getModel().getComponent('bmap').getBMap();
    //     bmap.addControl(new BMap.MapTypeControl());
    // }


    if (option && typeof option === "object") {
        myChart.setOption(option, true);
    }

    ;

    // $.getJSON(uploadedDataURL, function(linedata) {
    $.getJSON(testUrl, function(linedata) {
        // linedata = JSON.parse(linedata)
        var xAxisData = [];
        var bardata = [];
        // var linePoints =[];
        // for (var i = 0; i < linedata[0].length; i += 1) {tooltip
        //     xAxisData.push(linedata[0][i].name)
        //     bardata.push([linedata[0][i].name, linedata[0][i].value[2]])
        for (var i = 0; i<linedata.stations.length; i += 1){
            xAxisData.push(linedata.stations[i].name)
            var value = Math.floor(Math.random()*300)
            linedata.stations[i].value = [linedata.stations[i].value[0], linedata.stations[i].value[1], value]
            bardata.push([linedata.stations[i].name,value])
        }
        var linePoints = linedata.linePoints

        myChart.hideLoading();
        myChart.setOption({
            yAxis: {
                data: xAxisData
            },
            visualMap: {
                max: 300
            },
            series: [{
                data: linedata.stations,
                symbolSize: function(val) {

                    return Math.max(10 * val[2] / 300, 10);
                }
                // symbolSize:10

            }, {
                data: [{
                    coords: linePoints
                }]
            }, {
                data: bardata
            }, {
                data: [[0.0, 125.0], [6.0, 1397.0], [7.0, 3287.0], [8.0, 3551.0], [9.0, 733.0], [10.0, 765.0], [11.0, 507.0], [12.0, 963.0], [13.0, 849.0], [14.0, 1003.0], [15.0, 541.0], [16.0, 408.0], [17.0, 780.0], [18.0, 1610.0], [19.0, 1052.0], [20.0, 890.0], [21.0, 346.0], [22.0, 267.0], [23.0, 198.0]]
            }]
        });
        myChart.on('mouseover', function(params) {
            if (params.seriesId == 'bar') {
                myChart.setOption({
                    visualMap: {
                        seriesIndex: [0, 1, 2, 3, 4]
                    },
                    series: [{}, {}, {}, {}, {
                        type: 'effectScatter',
                        coordinateSystem: 'bmap',
                        symbolSize: function(val) {

                            return Math.max(30 * val[2] / linedata[1], 10)
                        },
                        data: [linedata.stations[params.dataIndex]],
                        showEffectOn: 'render',
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                textStyle: {
                                    fontSize: 15,
                                    fontWeight: 'bolder',
                                    color: 'rgba(18,89,127, 1)'
                                },
                                formatter: function(params1) {
                                    return linedata.stations[params.dataIndex].name;
                                }
                            },
                            emphasis: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    fontSize: 25,
                                    fontWeight: 'bold',
                                    color: 'rgba(18,89,147, 1)'
                                },
                                formatter: function(params1) {
                                    return linedata.stations[params.dataIndex].name;
                                }
                            }
                        }
                    }]
                });
            }
        })
        myChart.on('click', function(params) {
            if(params.seriesIndex == 0 | params.seriesIndex == 2){
                myChart.setOption({
                    bmap: {
                        center: linedata.stations[params.dataIndex].value,
                        zoom: 16
                    },
                    visualMap: {
                        seriesIndex: [0, 1, 2, 3, 4]
                    },
                    series: [{}, {}, {}, {}, {
                        type: 'effectScatter',
                        coordinateSystem: 'bmap',
                        symbolSize: function(val) {

                            return Math.max(30 * val[2] / linedata[1], 10)
                        },
                        data: [linedata.stations[params.dataIndex]],
                        showEffectOn: 'render',
                        label: {
                            normal: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    fontSize: 25,
                                    fontWeight: 'bold',
                                    color: 'rgba(18,89,147, 1)'
                                },
                                formatter: function(params1) {
                                    return linedata[0][params.dataIndex].name;
                                }
                            },
                            emphasis: {
                                show: true,
                                position: 'top',
                                textStyle: {
                                    fontSize: 25,
                                    fontWeight: 'bold',
                                    color: 'rgba(18,89,147, 1)'
                                },
                                formatter: function(params1) {
                                    return linedata.stations[params.dataIndex].name;
                                }
                            }
                        }
                    }]
                });}

        });
    });
</script>
</html>